new Vue({
    el: "#root",
    data: {
        layer: '',
        form: '',
        element: ''
    },
    methods: {},
    mounted: function (event) {
        let _self = this;
        layui.use(['element'], function () {
            let nowTab=0;
            _self.element = layui.element;
            _self.element.on('tab(tabSwitch)', function(data){

                console.log(data.index); //得到当前Tab的所在下标
                console.log(data.elem); //得到当前的Tab大容器
                let index=data.index;
                nowTab=index;
                $("#tabParent").children().each(function (i) {
                    if(index==i){
                        $(this).prop('class','layui-bg-blue');
                    }else{
                        $(this).prop('class','layui-bg-gray');
                    }
                });
            });

            _self.element.on('tabDelete(tabSwitch)', function(data){
                console.log(this); //当前Tab标题所在的原始DOM元素
                console.log(data.index); //得到当前Tab的所在下标
                console.log(data.elem); //得到当前的Tab大容器
                var index=data.index;
                //删除的是正在观看的页面
                if(nowTab==index){
                    //如果是最后一个tab
                    //alert($("#tabParent").children().get(index-1).html());
                    if($("#tabParent").children().length==index){

                        _self.element.tabChange('tabSwitch',  $($("#tabParent").children().get(index-1)).attr('lay-id'));
                    }else{
                        _self.element.tabChange('tabSwitch',  $($("#tabParent").children().get(index)).attr('lay-id'));
                    }
                }

            });
        });

        //默认首页内容
        $.get("../index/index.html", function (data) {
            $("#iframeContent").html(data);//初始化加载界面
        });

        $('#root dd').click(function () {//点击li加载界面
            var current = $(this);
            var target = current.find('a').attr('target'); // 找到链接a中的targer的值
            var tabId = current.find('a').attr('id');

            //判断是否打开该选项卡
            let boo = false;
            $("#tabParent li").each(function () {
                //alert($(this).attr('lay-id'));
                if ($(this).attr('lay-id') == tabId) {
                    boo = true;
                }
            });

            if (boo) {
                _self.element.tabChange('tabSwitch', tabId);
            } else {
                _self.element.tabAdd('tabSwitch', {
                    title: current.find('a').text(),
                    content: '<iframe src="'+target+'" width="100%" height="100%" style="border: 0px"></iframe>', //支持传入html
                    id: tabId
                });
                _self.element.tabChange('tabSwitch', tabId);
                // $.get(target, function (data) {
                //     //$("#iframeContent").html(data);
                //     _self.element.tabAdd('tabSwitch', {
                //         title: current.find('a').text(),
                //         content: , //支持传入html
                //         id: tabId
                //     });
                //     _self.element.tabChange('tabSwitch', tabId);
                //
                // });

            }


        });


    }

});